import React, { Component, createContext } from "react";

let { Provider, Consumer } = createContext();

class ButtonCmp extends Component{
  render(){
   return (
    <Consumer>
        {({handlAdd,handlSub})=>{
          let type = this.props.type ==="add"?"+":"-"
          return <button onClick={()=>{
          this.props.type==="add"?handlAdd():handlSub()
          }}>{type}</button>
        }}
    </Consumer>
   )
  }
}

// class ButtonAddCmp extends Component {
//   render() {
//     return <Consumer>
//       {({handlAdd})=>{
//           return <button onClick={handlAdd}>+</button>
//       }}
//     </Consumer>;
//   }
// }
// class ButtonSubCmp extends Component {
//   render() {
//     return <Consumer>
//       {({handlSub})=>{
//         return <button onClick={handlSub}>-</button>
//       }}
//     </Consumer>;
//   }
// }
class Counter extends Component {
  render() {
    return (
     <Consumer>
       {({num})=>{
         return <span>{num}</span>
       }}
     </Consumer>
    );
  }
}
class Test extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class App extends Component {
  state = {
    num: 666,
  };
  handlAdd = (params) => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  handlSub = (params) => {
    this.setState({
      num: this.state.num - 1,
    });
  };
  render() {
    return (
      <div>
        <Provider value={{ num: this.state.num,handlAdd:this.handlAdd,handlSub:this.handlSub}}>
          <Test>
            <ButtonCmp type="add"></ButtonCmp>
            <Counter></Counter>
            <ButtonCmp type="sub"></ButtonCmp>
          </Test>
        </Provider>
      </div>
    );
  }
}

export default App;
